<template>
    <div class="home">
        <!-- Form -->
        <!--    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

        <el-dialog title="Login"
                   :show-close="false"
                   :close-on-press-escape="false"
                   :close-on-click-modal="false"
                   :visible.sync="dialogFormVisible">
            <el-form :model="form" style="padding-left: 50px;padding-right: 120px" status-icon ref="form"
                     :rules="rules">
                <el-form-item label="id" prop="id" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="password" prop="password" :label-width="formLabelWidth">
                    <el-input type="password" show-password v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right">
                    <el-button type="primary" @click="submitForm('form')">login</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    import Vue from 'vue'

    export default {
        name: 'Home',
        components: {
            // HelloWorld
        },
        data() {
            let checkId = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('id不能为空'));
                }
                setTimeout(() => {
                    if (/^[A-Za-z0-9]{0,30}$/.test(value)) {
                        callback();
                    } else {
                        callback(new Error('id只能包含字母数字'));
                    }
                }, 100);
            };
            let checkPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('password不能为空'));
                }
                setTimeout(() => {
                    if (value.length < 6) {
                        callback(new Error('密码长度至少为6'));
                    } else {
                        callback()
                    }
                }, 100);
            };
            return {
                form: {
                    id: '',
                    password: ''
                },
                rules: {
                    id: [
                        {validator: checkId, trigger: 'blur'}
                    ],
                    password: [
                        {validator: checkPassword, trigger: 'blur'}
                    ]
                },
                dialogFormVisible: true,
                formLabelWidth: '80px'
            }
        },
        methods: {
            // 提交表单
            submitForm(formName) {
                let id = this.form.id
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        this.$http.post('/user', {
                            id: id,
                            password: this.form.password
                        }).then(res => {
                            console.log(res.data);
                            if (res.data.flag) {
                                this.dialogFormVisible = false;  //关闭弹窗
                                this.$message.success(res.data.message);
                                sessionStorage.setItem('token', res.data.data)  //存入缓存(单个页面有效)
                                // Vue.prototype.$token = res.data.data
                                this.$router.push("/" + id);   //去 /{id} 页面
                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(res => {
                            console.log(res)
                        });
                    } else {
                        return false;
                    }
                });
            },
            welcome() {
                this.$prompt('请输入你的id', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,  // 不显示右上角 x
                    closeOnClickModal: false,  // 取消点击遮罩关闭 MessageBox
                    inputPattern: /^[0-9A-Za-z]{1,30}$/,
                    inputErrorMessage: '格式不正确'
                }).then(({value}) => {
                    this.$router.push("/" + value)  //跳转到 /id
                    // this.$message({
                    //   type: 'success',
                    //   message: '你的id是: ' + value
                    // });
                })
            },
        },
        created() {
            // this.welcome()
        }
    }
</script>
